<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <p>
    <button @click="add">{{ count }}</button>
  </p>
  <p>{{ double }}</p>
</template>

<script>
import { ref, computed } from "vue";
export default {
  name: "App",
  //1. setup函数 是组合api的入口函数
  setup() {
    //2. ref函数 可以定义一些简单数据(基本类型)给模板使用
    let count = ref(0);
    const add = function () {
      count.value++;
    };
    const double = computed(() => {
      return count.value * 2;
    });
    // setup函数中的方法和数据页面要使用都必须return
    return {
      count,
      add,
      double,
    };
  },
};
</script>

<style>
</style>
